<template>
    <div class="flex flex-1 flex-col overflow-hidden">
        <div class="flex items-center px-4 py-2 border-b border-br-light">
            <span class="mr-2 font-bold text-tx-regular">入口组件</span>
        </div>
        <el-scrollbar>
            <div class="px-4 p-2">
                <div class="border-b border-dashed border-br mb-4">
                    <el-form-item label="右侧图片">
                        <material-picker
                            v-model="diyData.config.image"
                            :exclude-domain="true"
                            upload-class="bg-body"
                            size="60px"
                        >
                            <template #upload>
                                <div class="upload-btn w-[70px] h-[70px]">
                                    <icon name="el-icon-Plus" :size="16" />
                                    <span class="text-xs leading-5">选择</span>
                                </div>
                            </template>
                        </material-picker>
                    </el-form-item>
                    <el-form-item label="标题名称">
                        <el-input v-model="diyData.config.title"  />
                    </el-form-item>
                    <el-form-item label="简介描述">
                        <el-input v-model="diyData.config.intro" type="textarea" :rows="4" />
                    </el-form-item>
                    <el-form-item label="内顶距离">
                        <el-slider v-model="diyData.config.paddingTop" :max="300" />
                    </el-form-item>
                    <el-form-item label="内底距离">
                        <el-slider v-model="diyData.config.paddingBottom" :max="300" />
                    </el-form-item>
                    <el-form-item label="外顶距离">
                        <el-slider v-model="diyData.config.marginTop" :max="300" />
                    </el-form-item>
                    <el-form-item label="外底距离">
                        <el-slider v-model="diyData.config.marginBottom" :max="300" />
                    </el-form-item>
                    <el-form-item label="渐变角度">
                        <el-slider v-model="diyData.config.bgEdg" :max="360" />
                    </el-form-item>
                    <el-form-item label="背景颜色">
                        <div class="flex items-center gap-3">
                            <el-color-picker v-model="diyData.config.bgColorOne" color-format="hex" show-alpha />
                            <el-color-picker v-model="diyData.config.bgColorTow" color-format="hex" show-alpha />
                            <el-color-picker v-model="diyData.config.bgColorThree" color-format="hex" show-alpha />
                        </div>
                    </el-form-item>
                    <el-form-item label="标题颜色">
                        <el-color-picker v-model="diyData.config.titleColor" color-format="hex" show-alpha />
                    </el-form-item>
                    <el-form-item label="简介颜色">
                        <el-color-picker v-model="diyData.config.introColor" color-format="hex" show-alpha />
                    </el-form-item>
                </div>

                <Draggable v-model="diyData.data" item-key="key" animation="300" handle=".drag-move">
                    <template #item="{ element, index }">
                        <div class="w-full p-4 pt-2 mb-3 rounded bg-page">
                            <i class="serial mb-1">#{{ index + 1}}</i>
                            <el-form-item label="按钮名称">
                                <el-input v-model="element.name" placeholder="请输入名称" />
                            </el-form-item>
                            <el-form-item label="链接地址">
                                <links-picker v-model="element.link" client="pc" />
                            </el-form-item>
                            <div class="flex items-center gap-10">
                                <el-form-item label="文字颜色">
                                    <el-color-picker v-model="element.textColor" color-format="hex" show-alpha />
                                </el-form-item>
                                <el-form-item label="边框颜色">
                                    <el-color-picker v-model="element.borderColor" color-format="hex" show-alpha />
                                </el-form-item>
                            </div>
                            <el-form-item label="背景颜色">
                                <div class="flex items-center gap-3">
                                    <el-color-picker v-model="element.bgColorOne" color-format="hex" show-alpha />
                                    <el-color-picker v-model="element.bgColorTow" color-format="hex" show-alpha />
                                    <el-color-picker v-model="element.bgColorThree" color-format="hex" show-alpha />
                                </div>
                            </el-form-item>
                            <el-form-item label="渐变角度">
                                <el-slider v-model="element.bgEdg" :max="360" />
                            </el-form-item>
                            <el-form-item label="登录检测">
                                <el-switch v-model="element.isLogin" />
                            </el-form-item>
                            <el-form-item label="是否显示" style="margin-bottom: 0;">
                                <div class="flex-1 flex items-center">
                                    <el-switch v-model="element.isEnable" />
                                    <div class="drag-move cursor-move ml-auto">
                                        <icon name="el-icon-Rank" size="18" />
                                    </div>
                                </div>
                            </el-form-item>
                        </div>
                    </template>
                </Draggable>

                <div v-if="diyData.data.length <= 0">
                    <el-empty description="暂无数据" />
                </div>
            </div>
        </el-scrollbar>
    </div>
</template>

<script setup lang="ts">
import Draggable from 'vuedraggable'
import type { EntrantConfigType, EntrantDataType } from '../index.ts'

const props = defineProps({
    modelValue: {
        type: Object,
        default: () => ({
            config: {} as EntrantConfigType,
            data: [] as EntrantDataType[]
        })
    }
})

const emits = defineEmits<{
    (event: 'update:modelValue', value: any): void
}>()

// 装修数据
const diyData = computed({
    get() {
        return props.modelValue
    },
    set() {
        emits('update:modelValue', props.modelValue)
    }
})
</script>
